<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>领养中心</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content=""
    />
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!--// Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" type="text/css" media="all">
    <!-- Owl-Carousel-CSS -->
    <link rel="stylesheet" href="/static/css/style.css" type="text/css" media="all" />

</head>
<style>
    .btn-lg{
        background: #4aaaeb;
    }
</style>
<body>
<!--导航栏-->
<!-- sticky navigation -->
<div class="nav-links">
    <nav class='navbar navbar-default'>
        <div class='container'>
            <div class='collapse navbar-collapse'>
                <ul>
                    <li>
<!--                        <a href="/static/html/index.html">主页</a>-->
                        <a href="/static/html/index.html">主页</a>
                    </li>

                    <li>
<!--                        <a href="/static/html/about.html">流浪猫狗知识</a>-->
                        <a href="/static/html/about.html">流浪猫狗知识</a>
                    </li>
                    <li>
                        <a th:href="@{'/user/toPersonal?id='+${session.user.id}}">个人中心</a>
                    </li>
                    <li>
                        <a th:href="@{/goodsy/getAGoodsyAll}">救助商品</a>
                    </li>
                    <li>
                        <a th:href="@{/adopt/login}">领养中心</a>
                    </li>
                    <li th:if="${session.user.userName eq null}">
                        <button class="btn-primary btn-lg" data-toggle="modal" data-target="#login">注册/登录</button>
                    </li>
                    <li th:unless="${session.user.userName eq null}">
                        <button class="btn-primary btn-lg" data-toggle="modal" data-target="#editUsers">修改</button>
                    </li>
                    <li >
                        <span th:text="${session.user.userName}"></span>
                    </li>
                    <button class="btn-primary btn-lg exit">退出</button>
                </ul>
            </div>
        </div>
    </nav>
</div>
<!-- //sticky navigation -->

<!-- services -->
<div class="services" id="services">
    <div class="container">
        <h3 class="agile-title">Services Overview</h3>
        <div class="w3_agile_services_grids">
            <div class="col-md-4 col-sm-4 col-xs-4 w3_agile_services_grid " data-aos="zoom-in">
                <div class="ih-item circle effect1 agile_services_grid">
                    <div class="spinner"></div>
                    <div class="img">
					   <a th:href="@{'/adopt/getAdopAllByPetId?petId='+${listdop.get(0).petId}}">
                        <img src="/static/images/2.jpg" alt=" " class="img-responsive" />
                       </a>
                    </div>
                </div>
                <fieldset>
                    <legend>Service 1</legend>
                    consectetur adipiscing elit, sed do eiusmod tempor et dolore magna aliqua.
                </fieldset>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4 w3_agile_services_grid" data-aos="zoom-in">
                <div class="ih-item circle effect1 agile_services_grid">
                    <div class="spinner"></div>
                    <div class="img">
<!--                        <a href="/static/html/show.html">-->
                        <a th:href="@{'/adopt/getAdopAllByPetId?petId='+${listdop.get(1).petId}}">
                        <img src="/static/images/1.jpg" alt=" " class="img-responsive" />
                        </a>
                    </div>
                </div>
                <fieldset>
                    <legend>Service 2</legend>
                    consectetur adipiscing elit, sed do eiusmod tempor et dolore magna aliqua.
                </fieldset>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4 w3_agile_services_grid" data-aos="zoom-in">
                <div class="ih-item circle effect1 agile_services_grid">
                    <div class="spinner"></div>
                    <div class="img">
<!--					   <a href="/static/html/show.html">-->
                        <a th:href="@{'/adopt/getAdopAllByPetId?petId='+${listdop.get(2).petId}}">
                        <img src="/static/images/3.jpg" alt=" " class="img-responsive" />
                       </a>
                    </div>
                </div>
                <fieldset>
                    <legend>Service 3</legend>
                    consectetur adipiscing elit, sed do eiusmod tempor et dolore magna aliqua.
                </fieldset>
            </div>

        </div>

    </div>
    
</div>
<!-- //services -->
<!-- js -->
<script src="/static/JQuery/jquery-3.4.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<!-- Necessary-JavaScript-File-For-Bootstrap -->
<!-- //js -->

<!-- start-smooth-scrolling 上去-->
<script src="/static/js/move-top.js"></script>
<script src="/static/js/easing.js"></script>
<script>
    jQuery(document).ready(function ($) {
        $(".scroll").click(function (event) {
            event.preventDefault();

            $('html,body').animate({
                scrollTop: $(this.hash).offset().top
            }, 1000);
        });
    });
</script>
<!-- //end-smooth-scrolling -->

<!-- smooth-scrolling-of-move-up 这是service.html页面反到底层上去的功能 -->
<script>
    $(document).ready(function () {
        $().UItoTop({
            easingType: 'easeOutQuart'
        });
        $(".exit").on('click',function(){
            location.href = 'http://localhost:8081/';
        })

    });
</script>
<!-- //smooth-scrolling-of-move-up -->


</body>

</html>